import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, message, Input, Upload, Row, Col, Select, DatePicker, Form, Icon, Button } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';

import check from '../../utils/checkLib';
import AutomaticTable from './AutomaticTable';
import styles from './AutomaticProducts.less';

moment.locale('zh-cn');

const FormItem = Form.Item;
const Option = Select.Option;

function toString(str, type) {
  if (typeof str !== 'undefined' && str !== null) {
    return str.toString();
  }
  if (type === 'SELECT') return undefined;
  return '';
}

class AutomaticModal extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
    // skuTable改写父级方法
    this.getSkuValue = null;
    this.clearSkuValue = null;
  }


  handleSubmit() {
    const p = this;
    const { form, dispatch, modalValues } = this.props;
    form.validateFieldsAndScroll((err, fieldsValue) => {
      if (err) { return; }

      // 检验sku是否填写
      p.getSkuValue((AutomaticOrderDetailList) => {
        const values = {
          ...fieldsValue,
          AutomaticOrderDetailList: JSON.stringify(AutomaticOrderDetailList),
        };
        if (modalValues && modalValues.data) {
          dispatch({
            type: 'automatic/UpdateAutomatic',
            payload: { ...values, id: modalValues.data.id },            
            cb() { p.closeModal(); },
          });
        } else {
          dispatch({
            type: 'automatic/addAutomatic',
            payload: { ...values },
            cb() { p.closeModal(); },
          });
        }
      });
    });
  }

  closeModal() {
    const { form, close } = this.props;
    form.resetFields();
    close();
    // 清理skuTable
    setTimeout(() => {
      this.clearSkuValue();
    }, 100);
  }

	deleteAll(automaticId){
		const p = this;
    this.props.dispatch({
      type: 'automatic/deleteAutomatic',
      payload: { automaticId },
      cb() { p.closeModal(); },
    });
	}

  render() {
    const p = this;
    const { form, visible, modalValues = {} } = this.props;
    const {  } = this.state;
    const { getFieldDecorator } = form;

    // 详情数据
    const automaticData = (modalValues && modalValues.data) || {};
    const modalProps = {
      visible,
      width: 1400,
      wrapClassName: 'modalStyle',
      title: automaticData.autoNo ? '修改' : '添加',
      maskClosable: false,
      closable: false,
      footer:[automaticData.autoNo ? <Button style={{ float: 'left'}} type="primary" size="large" key="deleteAll" onClick={p.deleteAll.bind(p,automaticData.id)}>全部删除</Button> : '',
      				<Button size="large" key="Cancel" onClick={p.closeModal.bind(p)} >取消</Button>,
      				<Button type="primary" size="large" key="ok" onClick={p.handleSubmit.bind(p)} >确定</Button>]
    };

    const formItemLayout = {
      labelCol: { span: 11 },
      wrapperCol: { span: 13 },
    };

    return (
      <Modal {...modalProps} className={styles.modalStyle}>
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <Row>
          	<Col span={7}>
              <FormItem
                label="主单号"
                {...formItemLayout}
              >
                {getFieldDecorator('autoNo', {
                  initialValue: toString(automaticData.autoNo),
                  rules: [{ message: '请输入商品代码' }],
                })(
                  <Input disabled placeholder="主单号自动生成" />,
                )}
              </FormItem>
            </Col>
            <Col span={7}>
              <FormItem
                label="任务标题"
                {...formItemLayout}
              >
                {getFieldDecorator('taskTitle', {
                  initialValue: toString(automaticData.taskTitle),
                  rules: [{ required: true,message: '请输入任务标题' }],
                })(
                  <Input placeholder="请输入任务标题" />,
                )}
              </FormItem>
            </Col>
            <Col span={7}>
              <FormItem
                label="账号"
                {...formItemLayout}
              >
                {getFieldDecorator('accountUmber', {
                  initialValue: toString(automaticData.accountUmber, 'SELECT'),
                  rules: [{ required: true, message: '请输入账号' }],
                })(
                  <Select allowClear placeholder="请输入账号">
                    <Option key="wenyan_guu@hotmail.com">wenyan_guu@hotmail.com</Option>
                    <Option key="appleeveryday1@gmail.com">appleeveryday1@gmail.com</Option>
                  </Select>,
                )}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <AutomaticTable
              data={automaticData.automaticOrderDetail}
              parent={p}
            />
          </Row>
        </Form>
      </Modal>
    );
  }
}

function mapStateToProps(state) {
  const { } = state.automatic;
  return { };
}

export default connect(mapStateToProps)(Form.create()(AutomaticModal));
